<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>indexDB使用</title>
</head>

<body>
    <script>
        let dbName = 'helloIndexDB', version = 1, storeName = 'helloStore'
        let indexDB = window.indexedDB
        let db
        const request = indexDB.open(dbName, version)
        request.onsuccess = function (event) {
            db = event.target.result
            console.log('打开数据库成功---->',);
        }
        request.onerror = function (event) {
            console.log('打开数据库报错---->',);
        }

        request.onupgradeneeded = function (event) {
            console.log('数据库创建或者升级的时候触发---->',);
            db = event.target.result
            let objectStore
            if (!db.objectStoreNames.contains(storeName)) {
                objectStore = db.createObjectStore(storeName, { keyPath: 'id' })
            }
        }

        // 添加数据
        function addData(db, storeName, data) {
            let request = db.transaction([storeName], 'readwrite').objectStore(storeName).add(data)

            request.onsuccess = function (event) {
                console.log('添加数据库成功---->',);
            }
            request.onerror = function (event) {
                console.log('添加数据库报错---->',);
            }
        }



        // 获取数据 根据id
        function getDataByKey(db, storeName, key) {
            let transaction = db.transaction([storeName])
            let objectStore = transaction.objectStore(storeName)
            let request = objectStore.get(key)

            request.onerror = function (event) {
                console.log('事务失败')
            }

            request.onsuccess = function (event) {
                console.log('主键查询结果: ', request.result)
            }

        }

        // 根据id 修改数据
        function updateDB(db, storeName, data) {
            let request = db.transaction([storeName], 'readwrite').objectStore(storeName).put(data)
            request.onsuccess = function () {
                console.log('数据更新成功')
            }

            request.onerror = function () {
                console.log('数据更新失败')
            }
        }

        function deleteDB(db, storeName, id) {
            let request = db.transaction([storeName], 'readwrite').objectStore(storeName).delete(id)
            request.onsuccess = function () {
                console.log('数据删除成功')
            }

            request.onerror = function () {
                console.log('数据删除失败')
            }
        }



        setTimeout(() => {
            addData(db, storeName, {
                id: new Date().getTime(), // 必须且值唯一
                name: '测试' + new Date(),
                age: 18,
                desc: 'helloWord'
            })

            getDataByKey(db, storeName, 1738890446000)

            updateDB(db, storeName, { id: 1738891304256, name: '修改的内容' })

            deleteDB(db, storeName, 1738891304256)
        }, 1000)


    </script>
</body>

</html>